<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :title="title"
    :keyboard="false"
    :maskClosable="false"
    :footer="null"
    @cancel="close"
    :width="1400">
    <a-spin :spinning="spinning">
      <a-steps :current="current" class="m-b-24">
        <a-step v-for="item in ['签订', '打印', '完成']" :key="item" :title="item" />
      </a-steps>
      <sign-from
        v-if="current === 0"
        @submit="handleSubmit"
        :proposerID="data.ID"
        :pactClass="pactClass"
        :contractID="contractID"
        :type="type"></sign-from>
      <contract v-if="current === 1" :pactNoGUID="pactNoGUID" @print="current = 2"></contract>
      <transition enter-active-class="zoom_in">
        <a-card :bordered="false" v-if="current === 2">
          <a-result status="success" title="签订成功" sub-title="合同已签订完成">
            <template #extra>
              <y-button type="success" @click="handleSuccess">关闭</y-button>
            </template>
          </a-result>
        </a-card>
      </transition>
    </a-spin>
  </a-modal>
</template>

<script>
import signFrom from './form.vue'
import contract from './contract.vue'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: 'add'
    },
    title: {
      type: String,
      default: '新签合同'
    },
    pactClass: {
      type: String,
      default: '新签合同'
    },
    contractID: {
       type: [String, Number],
      default: ''
    }
  },
  provide () {
    return {
      handleClose: this.close
    }
  },
  components: {
    signFrom,
    contract
  },
  watch: {
    visible (n) {
      if (n) {
        this.current = 0
      }
    }
  },
  data () {
    return {
      spinning: false,
      current: null,
      pactNoGUID: ''
    }
  },
  methods: {
    handleSubmit (guid) {
      this.pactNoGUID = guid
      this.current = 1
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.current = null
    },
    handleSuccess () {
      this.$emit('success')
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
</style>
